<!--
功能：管理员考核处理组件,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/1 12:16,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div>
    <div class="header">
      <span>考核信息核查</span>
      <span class="sp1" @click="addAssess"><i class="el-icon-circle-plus-outline"></i></span>
    </div>
    <div class="box">
      <div class="mon" v-if="dis">
        <span><i class="el-icon-loading"></i>暂无考核内容</span>
      </div>
      <div class="page"
           v-for=" u in page"
           @click="openPage(u)"
           :key="u.id">
        <div class="page-header">
          <div class="userImage">
            <el-image :src="imgUrl"
                      class="image"
                      fit="fill"></el-image>
          </div>
          <div class="userText">
            <span>姓名：{{ u.user.name }}</span>
            <span>账户：{{ u.user.account }}</span>
            <span>电话：{{ u.user.phone }}</span>
            <span>专业：{{ u.user.professional }}</span>
            <span>班级：{{ u.user.grade }}</span>
          </div>
        </div>
        <div class="page-content">
          <div class="content">考核内容：</div>
          <div class="text">
            {{ u.content }}
          </div>
        </div>
      </div>
    </div>
    <div class="dialog">
      <el-dialog title="详细消息"
                 width="90%"
                 top="30vh"
                 :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column
            v-for="t in table"
            :key="t.id"
            :property="t.prop"
            :label="t.label">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <div class="drawer">
      <el-drawer
        title="考核信息添加"
        :visible.sync="drawer"
        size="80%"
        :direction="direction"
        :before-close="handleClose">
        <div class="user">
          <div class="input">
            <el-select
              v-model="value"
              filterable
              @input="change"
              remote
              reserve-keyword
              placeholder="请输入账号或则姓名"
              :remote-method="remoteMethod"
              :loading="loading">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.account">
              </el-option>
            </el-select>
          </div>
          <div class="details">
            <div><i class="el-icon-user"></i><span>姓名: </span>{{ MyUser.name }}</div>
            <div><i class="el-icon-user"></i><span>账号: </span>{{ MyUser.account }}</div>
            <div><i class="el-icon-user"></i><span>电话：</span>{{ MyUser.phone }}</div>
            <div><i class="el-icon-user"></i><span>专业：</span>{{ MyUser.professional }}</div>
            <div><i class="el-icon-user"></i><span>班级：</span>{{ MyUser.grade }}</div>
            <div><i class="el-icon-user"></i><span>床位：</span>{{ MyUser.beds.name }}</div>
            <div><i class="el-icon-user"></i><span>房间：</span>{{ MyUser.room.name }}</div>
            <div><i class="el-icon-user"></i><span>楼层：</span>{{ MyUser.floor.name }}</div>
          </div>
        </div>
        <div class="input-title">
          <el-input
            type="text"
            placeholder="请输入处理方式"
            v-model="deal"
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </div>
        <div class="input-text">
          <el-input
            type="textarea"
            placeholder="请输入具体内容"
            :rows="10"
            v-model="content"
            maxlength="30"
            show-word-limit>
          </el-input>
        </div>
        <div class="submit">
          <el-button type="primary" @click="insertAssess">考核提交</el-button>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {message} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "Examine",
  data() {
    return {
      dis: true,
      content: '',
      deal: '',
      MyUser: {
        name: '',
        account: '',
        phone: '',
        professional: '',
        grade: '',
        beds: {
          name: ''
        },
        room: {
          name: ''
        },
        floor: {
          name: ''
        }
      },
      options: [],
      loading: false,
      value: [],
      drawer: false,
      direction: 'ttb',
      userList: [],
      table: [{
        id: 1,
        prop: 'user.name',
        label: '姓名'
      }, {
        id: 2,
        prop: 'user.account',
        label: '账户'
      }, {
        id: 3,
        prop: 'user.phone',
        label: '电话'
      }, {
        id: 4,
        prop: 'user.professional',
        label: '专业'
      }, {
        id: 5,
        prop: 'user.grade',
        label: '班级'
      }, {
        id: 6,
        prop: 'room.name',
        label: '房间号'
      }, {
        id: 7,
        prop: 'floor.name',
        label: '楼层号'
      }, {
        id: 8,
        prop: 'content',
        label: '考核内容'
      }, {
        id: 9,
        prop: 'deal',
        label: '处理方式'
      }, {
        id: 10,
        prop: 'time',
        label: '处理时间'
      }],
      gridData: [],
      dialogTableVisible: false,
      page: [],
      imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      input3: '',
      select: ''
    };
  },
  components: {},
  computed: {
    ...mapState(["floor", "user"])
  },
  mounted() {
    // this.findAllUser()
    this.all()
  },
  methods: {
    insertAssess() {
      //  数据提交
      if ((this.MyUser != null) && (this.deal.trim() != '') && (this.content.trim() != '')) {
        //  数据整理操作
        let t = new Date()
        let assess = {
          uid: this.MyUser.id,
          rid: this.MyUser.room.id,
          fid: this.MyUser.floor.id,
          content: this.content,
          deal: this.deal,
          time: t.getFullYear() + '-' + (t.getMonth() + 1) + '-' + t.getDate(),
          rootId: this.user.id
        }
        //  数据请求添加
        this.$http.post('root/addAssess', assess).then(response => {
          message("success", "成功")
          this.drawer = false
        }).catch(err => {
          message("error", "请求参数错误")
        }).finally(() => {
          this.all()
        })
      } else {
        message("error", "内容不可为空！")
      }
    },
    change(value) {
      //数据匹配操作
      for (let i = 0; i < this.userList.length; i++) {
        if (this.userList[i].account == value) {
          this.MyUser = this.userList[i]
        }
      }
    },
    remoteMethod(query) {
      if (query.trim() !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.userList.filter((i) => {
            return (i.account.indexOf(query) > -1)
          })
        }, 200);
      } else {
        this.options = this.userList;
      }
    },
    handleClose(done) {
      //  关闭的时候调用的函数
      this.drawer = false
    },
    addAssess() {
      //  添加考核信息
      this.drawer = true
      //  函数调用 数据查询
      this.findAllUser()
    },
    handleDelete(index, row) {
      //  删除操作
      this.$confirm('此操作将永久删除该考核信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('root/removeAssess/' + row.id).then(response => {
          message("success", "成功")
        }).catch(err => {
          message("error", "请求参数错误")
        }).finally(() => {
          this.dialogTableVisible = false
          this.all()
        })
      }).catch(() => {

      });
    },
    openPage(u) {
      //  详细信息查看
      this.gridData = []
      this.dialogTableVisible = true
      this.gridData.push(u)
    },
    findAllUser() {
      if (this.userList.length == 0) {
        this.$http.post('root/userAll', this.floor).then(response => {
          message("success", "成功")
          this.options = this.userList = response.data
        }).catch(err => {
          message("error", "请求参数错误")
        })
      }
    },
    all() {
      //  查询所哟的考核记录
      this.$http.post('root/assessAll', this.floor).then(response => {
        message("success", "成功")
        this.page = response.data
        if (this.page.length == 0) {
          this.dis = true
        } else {
          this.dis = false
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>

.mon {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  letter-spacing: 3px;
  color: #909399;
}

.mon i {
  margin-right: 8px;
}

.input-title,
.input-text,
.submit {
  box-sizing: border-box;
  padding: 0 40px;
  margin: 10px 0;
}

.input-title {
  width: 30%;
  height: 50px;
  line-height: 50px;
}

.input-text {
  width: 100%;
}

.submit {
  width: 100%;
  height: 80px;
  text-align: end;
  line-height: 80px;
  /*background-color: red;*/
}

.user {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 0 40px;
  /*background-color: pink;*/
}

.input {
  width: 10%;
}

.details {
  width: 90%;
  display: flex;
  letter-spacing: 2px;
  justify-content: space-around;
  align-items: center;
  color: #A2A5A8;
}

.details span,
.details i {
  font-weight: 700;
  color: #000000;
}

.sp1 {
  cursor: pointer;
  font-size: 25px;
  transition: all .3s;
}

.sp1:hover {
  color: red;
}

.text {
  margin-top: 10px;
  letter-spacing: 3px;
  box-sizing: border-box;
  text-indent: 2em;
  font-size: 15px;
}

.content {
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  background-color: #fff;
  box-sizing: border-box;
  padding-left: 5px;
  border-left: 5px solid red;
}

.page-header {
  height: 50%;
  display: flex;
}

.userImage {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 120px;
  height: 150px;
}

.userText {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.userText span {
  margin: 4px 0;
}

.page-content {
  height: 50%;
  /*background-color: black;*/
}

.box {
  width: 100%;
  min-height: 400px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.page {
  width: 300px;
  height: 350px;
  margin: 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all .3s;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  background-color: #F3F3F3;
}

.page:hover {
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
}


.header {
  width: 100%;
  height: 50px;
  background-color: #F3F3F3;
  box-sizing: border-box;
  padding: 0 20px;
  border-left: 5px solid red;
  line-height: 50px;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
